<template>
    <div class="hotspot-issues">
        <div class="left-down"></div>
        <div class="right-down"></div>
        <ModalTitle title="市民爆料热点问题分析" :isBogBox="true" />
        <div class="charts" ref="echarts"></div>
    </div>
</template>

<script>
import ModalTitle from '@components/ModalTitle/Index.vue'
import {ZongHeZhiFaShDB} from '@/api/zhangzi'
export default {
    components: { ModalTitle },
    mounted() {
        this.getHotspotData()
    },
    methods: {
    // 市民爆料热点问题分析
        getHotspotData() {
            let count = [] // 数量
            let Listdata = [] // 时间
            ZongHeZhiFaShDB.hotWordAPI().then(res =>{
                console.log(res,'市民爆料热点问题分析');
                if(res.code == 200){
                    res.data.forEach(item => {
                        count.push(item.count)
                        Listdata.push(item.date)
                    })
                    this.init(count,Listdata)
                }
            })
        },
        init(count,Listdata) {
            let x = Listdata
            let mycharts = echarts.init(this.$refs.echarts)
            let option = {
                color: [{
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#00FDF4' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#00A2E2' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }],
                tooltip: {
                    show: true,
                    trigger: 'axis',
                },
                grid: {
                    left: 30,
                    top: 30,
                    right: 30,
                    bottom: 30
                },
                xAxis: {
                    show: true,
                    // x轴刻度
                    axisTick: {
                        show: false,
                        interval: 1,
                    },
                    // x轴轴线
                    axisLine: {
                        show: true,
                        symbol: ['none', 'arrow'],
                        lineStyle: {
                            color: '#5FD7FC'
                        }
                    },
                    // x轴数据
                    data: x,
                    // 显示指示线条
                    axisPointer: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                        }
                    },
                    textStyle: { color: '#fff', fontSize: 12 }
                },
                yAxis: {
                    show: true,
                    type: 'value',
                    name: '数量',
                    nameLocation: 'end',
                    nameTextStyle: {
                        color: '#fff',
                        fontSize: 12,
                        align: 'center'
                    },
                    // y轴轴线
                    axisLine: {
                        show: true,
                        symbol: ['none', 'arrow'],
                        symbolOffset: [0, 15],
                        lineStyle: {
                            color: '#A1E3FD'
                        }
                    },
                    // y轴文字
                    axisLabel: {
                        textStyle: {
                            show: true,
                            color: "#fff"
                        }
                    },
                    // y轴刻度
                    axisTick: {
                        show: true,
                        inside: true
                    },
                    // y轴分割线
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#23597A'
                        }
                    }
                },
                series: [
                    {
                        type: 'bar',
                        itemStyle: {
                        },
                        showBackground: true,
                        backgroundStyle: {
                        },
                        data: count,
                        barWidth: 32,
                    },
                ],
            };
            option && mycharts.setOption(option)
        }
    },
}
</script>

<style lang="less" scoped>
.hotspot-issues {
    width: 100%;
    height: 47.5rem;
    margin-bottom: 2.3rem;

    .left-down {
        position: absolute;
        bottom: 0.5rem;
        left: 0.5rem;
        width: 1rem;
        height: 1rem;
        background-image: url('../../../../assets/images/zhangzi/shimin/leftdown.png');
        background-size: 100% 100%;
    }

    .right-down {
        position: absolute;
        bottom: 0.5rem;
        right: 0.5rem;
        width: 1rem;
        height: 1rem;
        background-image: url('../../../../assets/images/zhangzi/shimin/rightdown.png');
        background-size: 100% 100%;
    }

    .charts {
        width: 100%;
        height: calc(100% - 3.8rem - 1.5rem);
        margin-top: 1.5rem;
    }
}
</style>